<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <!-- <script src="./axios.js"></script> -->
</head>

<body>
    <!-- 自定义事件监听 -->
    <!-- 
        不同于组件和 prop，事件名不存在任何自动化的大小写转换。
        而是触发的事件名需要完全匹配监听这个事件所用的名称。
        举个例子，如果触发一个 camelCase 名字的事件： 

        this.$emit('myEvent')

        则监听这个名字的 kebab-case 版本是不会有任何效果的：
 
        <my-component v-on:my-event="doSomething"></my-component>
        
        不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，
        所以就没有理由使用 camelCase 或 PascalCase 了。
        并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，
        所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

        因此，我们推荐你始终使用 kebab-case 的事件名。
    -->

    <div id="app">
        <button @click="clickUpdate()">Click Me,Update Checkbox</button>
        <base-checkbox v-model="lovingVue"></base-checkbox>
    </div>

    <script>
        Vue.component('base-checkbox', {
            model: {
                prop: 'checked',
                event: 'change'
            },
            props: {
                checked: Boolean
            },
            template: `
                        <input
                        type="checkbox"
                        v-bind:checked="checked"
                        v-on:change="$emit('change', $event.target.checked)"
                        >
                    `
        });

        new Vue({
            el: app,
            data: {
                lovingVue: false
            },
            methods: {
                clickUpdate: function() {
                    return this.lovingVue = this.lovingVue == true ? false : true
                }
            }
        })
    </script>
</body>

</html>